<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>客户签名</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../../css/global.css">
		<link rel="stylesheet" href="../../../../css/style.css">
		<style>
			.mSign_signMark_box,.mSign_signMark_preview{
				padding: 15px 15px 26px 15px;
			}
			
			.btn_box,.mSign_signMark_preview{
				display: none;
			}
			
			.mSign_signMark_footer {
				max-width: 640px;
				margin: 0 auto;
				height: 44px;
				background: #4ba7eb;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				color: #fff;
				font-size: 16px;
				text-align: center;
				line-height: 44px;
			}

			.mSign_signMark_footer span {
				display: block;
				width: 50%;
				text-align: center;
				float: left;
			}

			.mSign_signMark_footer_cancle {
				background: #f4f4f5;
				color: #333333;
			}

			/*手写签名*/
			.mSign_signMark_write_box {
				position: relative;
				height: 500px;
			}

			.mSign_signMark_body_box {
				position: absolute;
				background-color: #fff;
				border: 1px solid #ccc;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 99%;
				height: auto;
				min-width: 250px;
				min-height: 140px;
			}

			.mSign_signMark_body {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}

			.mSign_signMark_body canvas {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.mSign_signMark_body p {
				position: absolute;
				font-size: 14px;
				color: #ccc;
				text-align: center;
				width: 100%;
				top: 50%;
				margin-top: -22px;
				z-index: 1;
			}

			.mSign_signMark_clear_out {
				position: absolute;
				top: -10px;
				right: -5px;
				z-index: 10;
				display: none;
			}

			.mSign_signMark_clear_out img {
				width: 18px;
				height: 18px;
			}
			.mSign_signMark_preview img{
				width: 100%;
				min-height: 139.4vw;
				border: 1px solid #ccc;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">客户签名</h1>
		</header>
		<!--手写区-->
		<div class="mui-content">
		    <div class="mSign_signMark_box">
		        <div class="mSign_signMark_write_box" id="box">
		            <div id="mSign_signMark_signature_pad" class="mSign_signMark_body_box">
		                <div class="mSign_signMark_body">
		                    <span class="mSign_signMark_clear_out">
		                        <!-- <img src="../images/mCommon_basicIcon_deleteRed.png"> -->
		                    </span>
		                    <p>手写区</p>
		                    <canvas id="mSign_signMark_canvas"></canvas>
		                </div>
		            </div>
		        </div>
				<div class="mui-input-row mui-checkbox zp_check mui-left" style="width: 100%;margin: 20px auto;" onclick="queding()">
					<input name="checkbox1" value="1" type="checkbox">
					<label>是否需要发送邮件</label>
				</div>
				<div class="clum autoHeight" id="emailAddresss" style="display: none;">
					<!-- <span class="name">邮箱<em class="t_red">*</em></span>
					<div class="clear"></div> -->
					<textarea id="emailAddress" class="textarea" placeholder="请输入邮箱，多个邮箱用;隔开"></textarea>
				</div>
		    </div>
			
		    <!--手写区 end-->
			
			<!-- 预览区 -->
			<div class="mSign_signMark_preview" style="min-height: 70vh;">
				
			</div>
			<!-- 预览区end -->
			
		    <!--底部按钮-->
		 <!--   <div class="mSign_signMark_footer">
		        <span id="mSign_signMark_clear_out" class="mSign_signMark_footer_cancle">清除</span>
		        <span id="mSign_signMark_submit" class="mSign_signMark_footer_sure">确定</span>
		    </div> -->
			</div>
			<div class="btn_box btn_mSign">
				<span class="fl" id="mSign_signMark_clear_out">清除</span>
				<span class="fr red" id="mSign_signMark_submit">确定</span>
			</div>
			<!-- 预览状态按钮 -->
			<div class="btn_box btn_preview">
				<span class="fl" id="mSign_signMark_back">返回</span>
				<span class="fr red" id="mSign_signMark_re_upload">重新上传</span>
			</div>
		    <!--底部按钮 end-->
			<div style="height: 100px;"></div>

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../../../js/utils/h.js"></script>
		<script src="../../../../js/constant.js"></script>
		<script src="../../../../js/common.js"></script>
		<script src="../../../../js/utils/base64.js"></script>
		<script src="../../../../js/utils/md5.js"></script>
		<script src="../../../../js/utils/sortMap.js"></script>
		<script src="../../../../js/utils/http.js"></script>
		<script src="../../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../../js/fse/signature/jquery.min.js"></script>
		<script src="../../../../js/fse/signature/mSign_signMark_app.js"></script>
		<script src="../../../../js/fse/signature/mSign_signMark_signature_pad.js"></script>
		<script type="text/javascript" charset="utf-8">
		var serviceNoticeId;
		var serviceNo;
		var enginnerId;
		var emailAddress;
		var sign = false;
		
		(function($, doc) {
			
			$.init();
		
			$.plusReady(function() {
				var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度
				var bodyHeight = document.getElementById("box"); //寻找ID为content的对象
				bodyHeight.style.height = (h - 180) + "px"; //你想要自适应高度的对象
				var self = plus.webview.currentWebview();
				serviceNoticeId = self.serviceNoticeId;
				
				serviceNo = self.serviceNo;
				enginnerId = app.getUser().enginnerId;
				initData()
				getSignaturePic()
			});
			}(mui, document));
			
			
		//手写区触摸事件
        $(function () {
            var ctouch = $('.mSign_signMark_body canvas');
            ctouch.bind("touchstart", function (event) {
				sign = true;
                $('.mSign_signMark_body p').hide();
            });
            ctouch.mouseover(function (event) {
                $('.mSign_signMark_body p').hide();
            });
			
        });
        mSign_signMark_app();	
				
		function queding(){
			var ele = document.getElementsByName("checkbox1");
			if(ele[0].checked){
				$("#emailAddresss").show();
			}else{
				$("#emailAddresss").hide();
			}
		}
		
		function initData(){
			ajaxGet(BASE_URL + "cc/notice/getDaiZhiPaiNoticeDetail", {
				"ServiceNoticeId": serviceNoticeId
			}, function(data) {
				console.log(JSON.stringify(data))
				if (data.code == 200) {
					if(data.data!=""){
						if(data.data.email!=undefined && data.data.email!=''){
							emailAddress = data.data.email+";"+app.getUser().email;
							h("#emailAddress").val(emailAddress);
						}else{
							emailAddress = app.getUser().email;
							h("#emailAddress").val(emailAddress);
						}
					}
				}
			}, function(errorMsg) {
				console.log(JSON.stringify(errorMsg))
			});
		}
		
		// 获取签名图片
		function getSignaturePic(){
			app.showWaiting()
			ajaxGet(BASE_URL + "cc/report/info/getServiceSignPicHandle", {
				serviceNo: serviceNo,
			}, function(data) {
				if(data.code == 200 && data.data!= ''){
					var picData = JSON.parse(data.data)
					if(picData.record&&picData.record.length > 0){
						var html = '<img id="preview_img" src="'+ picData.record[0].url +'" alt="加载失败">'
							html += '<p>已存在的签名</p>'
						h('.mSign_signMark_preview').html(html)
						document.getElementById('preview_img').onload = function(){
							console.log('加载完成')
							app.closeWaiting();
						}
						document.getElementById('preview_img').onerror = function(){
							console.log('加载失败')
							app.closeWaiting();
						}
						h('.mSign_signMark_box').hide();
						h('.btn_mSign').hide();
						h('.mSign_signMark_preview').show();
						h('.btn_preview').show();
						// }
					}else{
						h('.mSign_signMark_preview').hide();
						h('.btn_preview').hide();
						h('.mSign_signMark_box').show();
						h('.btn_mSign').show();
						app.closeWaiting();
					}
				}else{
					app.closeWaiting()
				}
			}, function(errorMsg){
				app.closeWaiting()
				app.toast(errorMsg)
			})
		}
		
		
		h('#mSign_signMark_back').tap(function(){
			mui.back();
		})
		h('#mSign_signMark_re_upload').tap(function(){
			h('.mSign_signMark_preview').hide();
			h('.btn_preview').hide();
			h('.mSign_signMark_box').show();
			h('.btn_mSign').show();
		})
		
		</script>
		<!-- js代码 end -->

	</body>

</html>
